import React, {useEffect, useMemo, useState} from "react"
import {observerDashboardPageWrapper} from "../../components/dashboardPages/ObserverDashboardPageWrapper";
import DataPageLayout from "../../components/DataPageLayout";
import {
    compareWithOriginalOrder,
    MarketDeliveryOrderCompareWithOriginalOrderItem, MarketDeliveryOrderCompareWithOriginalOrderResponse,
    MarketDeliveryOrderItem
} from "../../apis/MarketDeliveryOrderApi";
import {ConfigProvider, Descriptions, Table, theme} from "antd";
import {useTableSearchTextColumnProps} from "../../utils/AntdTableUtils";
import dashboardPageStore from "../../store/DashboardPageStore";
import {createUseStyles} from "react-jss";
import {GlobalToken} from "antd/es/theme/interface";

const useStyles = createUseStyles({
    missingRow: (props: GlobalToken) => ({
        backgroundColor: props.colorBgContainerDisabled,
    }),
    additionalRow: (props: GlobalToken) => ({
        backgroundColor: props.colorError,
    }),
    invalidAmountRow: (props: GlobalToken) => ({
        backgroundColor: props.colorWarning,
    })
})

export interface MarketDeliveryOrderCompareWithOriginalOrderPageProps {
    id: number
}


const MarketDeliveryOrderCompareWithOriginalOrderPage: React.FC<MarketDeliveryOrderCompareWithOriginalOrderPageProps> = ({id}) => {
    const [data, setData] = useState<MarketDeliveryOrderCompareWithOriginalOrderResponse>()
    let token = theme.useToken();
    const classes = useStyles(token.token)
    useEffect(() => {
        compareWithOriginalOrder(id).then(response => {
            setData(response.data)
            dashboardPageStore.setTitle(`markets/deliveryOrders/${id}/compareWithOriginalOrder`, response.data.marketName + "订单差异对比")
        })
    }, []);
    const items = useMemo(() => {
        return data?.items ?? []
    }, [data]);
    let searchNameTableColumnProps = useTableSearchTextColumnProps<MarketDeliveryOrderCompareWithOriginalOrderItem>("goodsName", {
        placeholder: "名字"
    });
    let barcodeSearchProps = useTableSearchTextColumnProps<MarketDeliveryOrderCompareWithOriginalOrderItem>("goodsBarcode", {
        placeholder: "条码"
    });
    return (
        <>
            {!!data && <Descriptions title={`${data!.marketName}订单差异对比`}/>}
            <DataPageLayout>
                <ConfigProvider componentSize={"small"}>
                    <Table<MarketDeliveryOrderCompareWithOriginalOrderItem>
                        dataSource={items} rowKey={"goodsId"}
                        pagination={false}
                        rowClassName={(record, index) => {
                            if (record.amount == undefined) {
                                return classes.additionalRow
                            } else if (record.actuallyAmount == undefined) {
                                return classes.missingRow
                            } else {
                                return classes.invalidAmountRow
                            }
                        }}
                        columns={[
                            {
                                dataIndex: "goodsBarcode",
                                title: "条码",
                                ...barcodeSearchProps,
                                onFilter: (value, record) => {
                                    return record.goodsBarcode.toLowerCase().includes((value as string).toLowerCase())
                                },
                            },
                            {
                                dataIndex: "goodsName",
                                title: "名称",
                                ...searchNameTableColumnProps,
                                onFilter: (value, record) => {
                                    return record.goodsName.toLowerCase().includes((value as string).toLowerCase())
                                }
                            },
                            {
                                dataIndex: "amount",
                                title: "原数量"
                            },
                            {
                                dataIndex: "actuallyAmount",
                                title: "实际数量"
                            },
                        ]}>

                    </Table>
                </ConfigProvider>
            </DataPageLayout>
        </>
    )
}

export default observerDashboardPageWrapper(MarketDeliveryOrderCompareWithOriginalOrderPage, "markets/deliveryOrders/{id}/compareWithOriginalOrder", "订单对比")
